<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>舟山旅游</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			ul {
				list-style: none;
			}

			a {
				text-decoration: none;
			}

			.center {
				width: 1000px;
				margin: 0 auto;
			}

			/*********************导航栏**************************/
			

			/*********************热门景点 **********************/
			.scroll img {
				width: 100%;
			}
			.scenery .row1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.scenery .txt2 {
				display: flex;
				align-items: center;
				margin: 20px 0;
			}

			.scenery .icon {
				width: 30px;
				height: 30px;
				background: url(img/icon.png) no-repeat -298px -198px;
			}

			.scenery .txt2 span {
				font-size: 24px;
				margin-left: 10px;
			}

			.scenery .pic .left-pic {
				position: relative;
				width: 40%;
				overflow: hidden;
			}

			.scenery .pic .left-pic img {
				display: block;
				width: 100%;
				transition: 2s;
			}

			.scenery .pic .left-pic img:hover {
				transform: scale(1.2);
			}

			.scenery .pic .left-pic p {
				position: absolute;
				bottom: 30px;
				left: 10px;
				color: #fff;
				font-size: 20px;
			}

			.scenery .pic .center {
				display: flex;
			}

			.scenery .pic .right-pic {
				width: 60%;
				margin-left: 10px;
			}

			.scenery .pic .right-pic ul {
				display: flex;
				flex-wrap: wrap;
			}

			.scenery .pic .right-pic ul li {
				width: 50%;
				padding: 0 10px;
				box-sizing: border-box;
				color: #555;
			}

			.scenery .pic .right-pic ul li img {
				width: 100%;
			}

			/* 东海人家 */
			.hotel {
				/* background-image: url(img/index/index5.jpg); */
			}

			.hotel .row1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.hotel a {
				/* color: #fff; */
			}

			.hotel .txt2 {
				display: flex;
				align-items: center;
				margin: 20px 0;
				color: #555;
			}

			.hotel .icon {
				width: 30px;
				height: 30px;
				background: url(img/icon.png) no-repeat -298px -246px;
			}

			.hotel .txt2 span {
				font-size: 24px;
				margin-left: 10px;
			}

			.hotel ul {
				display: flex;
				justify-content: space-between;
			}

			.hotel ul li {
				width: 30%;
				color: #fff;
				margin-bottom: 20px;
			}

			.hotel ul li img {
				width: 100%;
			}

			/* 舟山海味 */
			.food .row1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.food .txt2 {
				display: flex;
				align-items: center;
				margin: 20px 0;
			}

			.food .icon {
				width: 30px;
				height: 30px;
				background: url(img/icon.png) no-repeat -566px -198px;
			}

			.food .txt2 span {
				font-size: 24px;
				margin-left: 10px;
			}

			.food .pic .left-pic {
				position: relative;
				width: 40%;
				overflow: hidden;
			}

			.food .pic .left-pic img {
				display: block;
				width: 100%;
				transition: 2s;
			}

			.food .pic .left-pic img:hover {
				transform: scale(1.2);
			}

			.food .pic .left-pic p {
				position: absolute;
				bottom: 10px;
				left: 10px;
				color: #fff;
				font-size: 20px;
			}

			.food .pic .center {
				display: flex;
			}

			.food .pic .right-pic {
				width: 60%;
				margin-left: 10px;
			}

			.food .pic .right-pic ul {
				display: flex;
				flex-wrap: wrap;
			}

			.food .pic .right-pic ul li {
				width: 50%;
				padding: 0 10px;
				box-sizing: border-box;
				color: #555;
				margin-bottom: 10px;
			}

			.food .pic .right-pic ul li img {
				width: 100%;
			}

			/***************热门景点*****************/
			.scenery2 .txt2 {
				display: flex;
				align-items: center;
				padding: 30px 0 10px;
			}

			.scenery2 .icon {
				width: 30px;
				height: 30px;
				background: url(img/icon.png) no-repeat -298px -198px;
			}

			.scenery2 .txt2 span {
				font-size: 24px;
				margin-left: 10px;
			}

			.scenery2 .area {
				/* border: 1px solid #000; */
				overflow: hidden;
			}

			.scenery2 .area ul {
				width: 200%;
				display: flex;
				animation: move 10s linear infinite;
			}

			@keyframes move {
				100% {
					transform: translateX(-1000px);
				}
			}

			.scenery2 .area ul:hover {
				animation-play-state: paused;
			}

			.scenery2 .area ul li {
				width: 12.5%;
			}

			.scenery2 .area ul li img {
				display: block;
				margin: 0 auto;
				width: 95%;
				height: 80%;
				margin-top: 5px;
			}

			.scenery2 .area ul li p {
				text-align: center;
				margin-top: 5px;
				font-size: 14px;
			}

			/********************页尾*********************/
			.foot {
				background-color: rgba(0, 0, 0, .6);
			}

			.foot .main {
				display: flex;
				justify-content: space-between;
				color: #fff;
				padding: 30px 0;
				height: 130px;
				margin-top: 150px;
			}

			.foot .main .box1 p {
				margin: 10px 0;
			}

			.foot .main .box1 a {
				color: #fff;
				font-size: 14px;
			}

			.foot .main .box2 img {
				width: 50px;
				height: 50px;
				vertical-align: middle;
			}

			.foot .main .box3 {
				display: flex;
			}

			.foot .main .box3>div {
				margin: 0 5px;
			}

			.foot .main .box3 p {
				text-align: center;
				font-size: 12px;

			}
		</style>
	</head>
	<body>
		<div class="nav">
			<iframe src="nav.html" frameborder="0" width="100%" height="100px" scrolling="no"></iframe>
		</div>
		<div class="scroll">
			<img src="img/index/view_1.jpg" alt="">
		</div>
		<div class="scenery">
			<div class="center">
				<div class="row1">
					<div class="txt2">
						<div class="icon"></div>
						<span>热门景点</span>
					</div>
					<a href="scenery_list.html">更多&gt;&gt;</a>
				</div>
				<div class="pic">
					<div class="center">
						<div class="left-pic">
							<a href="scenery_show.html"><img src="img/index/puTuoShan.jpg"></a>
							<p>普陀山风景名胜区</p>
						</div>
						<div class="right-pic">
							<ul>
								<li>
									<img src="img/scenery/1.jpg" alt="">
									<p>朱家尖国际沙雕艺术广场</p>
								</li>
								<li>
									<img src="img/scenery/2.jpg" alt="">
									<p>朱家尖国际沙雕艺术广场</p>
								</li>
								<li>
									<img src="img/scenery/3.jpg" alt="">
									<p>朱家尖国际沙雕艺术广场</p>
								</li>
								<li>
									<img src="img/scenery/4.jpg" alt="">
									<p>朱家尖国际沙雕艺术广场</p>
								</li>
							</ul>
						</div>
					</div>
				</div>

			</div>
		</div>
		<div class="hotel">
			<div class="center">
				<div class="row1">
					<div class="txt2">
						<div class="icon"></div>
						<span>东海人家</span>
					</div>
					<a href="hotel.html">更多&gt;&gt;</a>
				</div>
				<div class="pic">
					<div class="center">
						<ul>
							<li>
								<img src="img/index/21.png" alt="">
								<p>东沙古镇小岙民宿</p>
							</li>
							<li>
								<img src="img/index/22.png" alt="">
								<p>东沙古镇小岙民宿</p>
							</li>
							<li>
								<img src="img/index/23.png" alt="">
								<p>东沙古镇小岙民宿</p>
							</li>
						</ul>
					</div>
				</div>

			</div>
		</div>
		<div class="food">
			<div class="center">
				<div class="row1">
					<div class="txt2">
						<div class="icon"></div>
						<span>舟山海味</span>
					</div>
					<a href="food.html">更多&gt;&gt;</a>
				</div>
				<div class="pic">
					<div class="center">
						<div class="left-pic">
							<a href="scenery_show.html"><img src="img/index/yepaidang.jpg"></a>
							<p>沈家门排挡</p>
						</div>
						<div class="right-pic">
							<ul>
								<li>
									<img src="img/food/1.jpg" alt="">
									<p>朱家尖国际沙雕艺术广场</p>
								</li>
								<li>
									<img src="img/food/11.jpg" alt="">
									<p>朱家尖国际沙雕艺术广场</p>
								</li>
								<li>
									<img src="img/food/12.jpg" alt="">
									<p>朱家尖国际沙雕艺术广场</p>
								</li>
								<li>
									<img src="img/food/13.jpg" alt="">
									<p>朱家尖国际沙雕艺术广场</p>
								</li>
							</ul>
						</div>
					</div>
				</div>

			</div>
		</div>
		<div class="scenery2">
			<div class="center">
				<div class="txt2">
					<div class="icon"></div>
					<span>欢迎来舟山</span>
				</div>

				<div class="area">
					<ul>
						<li class="active">
							<img src="img/scenery/1.jpg">
							<p>朱家尖国际沙雕艺术广场</p>
						</li>
						<li>
							<img src="img/scenery/2.jpg">
							<p>朱家尖大青山国家公园</p>
						</li>
						<li>
							<img src="img/scenery/3.jpg">
							<p>嵊泗原生态蓝色海岸休闲度假旅游带</p>
						</li>
						<li>
							<img src="img/scenery/4.jpg">
							<p>庙子湖岛</p>
						</li>
						<li>
							<img src="img/scenery/1.jpg">
							<p>朱家尖国际沙雕艺术广场</p>
						</li>
						<li>
							<img src="img/scenery/2.jpg">
							<p>朱家尖大青山国家公园</p>
						</li>
						<li>
							<img src="img/scenery/3.jpg">
							<p>嵊泗原生态蓝色海岸休闲度假旅游带</p>
						</li>
						<li>
							<img src="img/scenery/4.jpg">
							<p>庙子湖岛</p>
						</li>
					</ul>
				</div>
			</div>
		</div>



		<div class="foot">
			<div class="center">
				<div class="main">
					<div class="box1">
						<p>友情链接</p>
						<div>
							<a href="http://www.zhujiajian.com/">朱家尖旅游网</a>
							<a href="https://www.ctrip.com/">携程旅游网</a>
							<a href="https://www.tuniu.com/">途牛旅游网</a>
						</div>
					</div>
					<div class="box2">
						<img src="img/icon1.png">
						<span>旅游咨询投诉热线：12345</span>
					</div>
					<div class="box3">
						<div>
							<img src="img/weibo.png">
							<p>官方微博</p>
						</div>
						<div>
							<img src="img/weixin.png">
							<p>官方微信</p>
						</div>

					</div>
				</div>
			</div>
		</div>
	</body>
</html>
